<template>
	<view class="site">
		<nav-bar class="header" title="业务管理" @goBack="goBack">
			<img slot="screen" src="../../../static/img/sx.png" alt="" @click="screen">
		</nav-bar>
		<view v-if="list.length > 0">
			<!-- 搜索 -->
			<view class="patrol-search">
				<van-search disabled v-model="searchValue" left-icon="" right-icon="search" placeholder="请输入"
					@click="showSearch=true" @cancel="onSearch('')" />
			</view>
			<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
				<van-list v-model="isLoading" :finished="finished" finished-text="没有更多了" @load="loadMore">
					<!-- 列表页 -->
					<standingCell @acquireId='acquireId' :list='list' :lableList='lableList' />
				</van-list>
			</van-pull-refresh>
		</view>
		<view v-else class="site-other">
			— — 暂无数据，请选择其他类型查看 — —
		</view>
		<!--弹出搜索页-->
		<van-popup v-model="showSearch" position="right">
			<search-equ-match @cancel="showSearch = false;" @search="onSearch" />
		</van-popup>
		<!--筛选弹窗-->
		<screenPopup :type-list="filtrationList" :showScreen="showScreen" @closePopup="showScreen=false"
			:multipleChoice='true' @confirm="confirmCondition">
		</screenPopup>
	</view>
</template>

<script>
	import navBar from "../../../components/common/nav-bar.vue";
	import screenPopup from "../common/screenPopup.vue";
	import plateTitle from "../../../components/business/plateTitle.vue";
	import searchEquMatch from '../../common/searchEquMatch';
	import standingCell from "../../../components/standingBookComponents/cell/cell.vue"
	export default {
		data() {
			return {
				showSearch: false,
				showScreen: false,
				refreshing: false, // 是否正在刷新
				finished: false,
				isLoading: false,
				total: 0, // 总条数
				page: 1,
				limit: 20,
				searchValue: '', //搜索
				showSelectContent: false, //筛选弹窗
				lableList: ['站点类型', '电压等级', '电压等级', '电压等级'],
				list: [],
				filtrationList: [{
					name: '地理区域',
					type: 1,
					child: [{
						TITLE: '全部',
						VALUE: 1,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 2,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 3,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 4,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 5,
						isActive: true
					}]
				}, {
					name: '地理区域',
					type: 2,
					child: [{
						TITLE: '全部',
						VALUE: 1,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 2,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 3,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 4,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 5,
						isActive: true
					}]
				}, {
					name: '地理区域',
					type: 3,
					child: [{
						TITLE: '全部',
						VALUE: 1,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 2,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 3,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 4,
						isActive: true
					}, {
						TITLE: '今年',
						VALUE: 5,
						isActive: true
					}]
				}],
				typeList: [{
						TITLE: '今年',
						VALUE: 1,
						isActive: true
					},
					{
						TITLE: '去年',
						VALUE: 2,
						isActive: false
					},
					{
						TITLE: '本月',
						VALUE: 3,
						isActive: false
					},
					{
						TITLE: '上月',
						VALUE: 4,
						isActive: false
					},
				],
			}
		},
		components: {
			navBar,
			searchEquMatch,
			standingCell,
			screenPopup,
			plateTitle
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				let list = [{
					name: '广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦广广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦广鑫大厦',
					zdlx: '变电站',
					dydj: '220kv',
					txdj: '三级网',
					dlqy: '太原',
					status: 1
				}, {
					name: '广鑫大厦',
					zdlx: '变电站',
					dydj: '220kv',
					txdj: '三级网',
					dlqy: '太原',
					status: 0
				}, {
					name: '广鑫大厦',
					zdlx: '变电站',
					dydj: '220kv',
					txdj: '三级网',
					dlqy: '太原',
					status: 2
				}, {
					name: '广鑫大厦',
					zdlx: '变电站',
					dydj: '220kv',
					txdj: '三级网',
					dlqy: '太原',
					status: 2
				}]
				// let list = []
				this.list = list.map(v => {
					return {
						name: v.name,
						secondArr: [{
								label: "站点类型",
								value: v.zdlx,
								// bg:v.status == 0 ? 'red':v.status == 1 ? 'green':'blue'
							},
							{
								label: "电压等级",
								value: v.dydj
							},
							{
								label: "通信网等级",
								value: v.dlqy
							},
							{
								label: "地理区域",
								value: v.dlqy
							},
						]
					}
				})
				// 写接口
				// this.$api.getSingleMonthPatrolList(params).then(res => {
				// 	this.isLoading = false;
				// 	this.refreshing = false;
				// 	// 列表页赋值
				// 	// this.taskList = res.data;
				// })
			},
			resetCondition() {
				this.otherTimArr = [];
				this.otherTim = '';
			},
			confirmCondition(selected) {
				console.log(selected,"selected")
				// this.planTim = selected
				// this.onRefresh()
			},
			onRefresh() {
				this.refreshing = true;
				this.finished = false;
				this.page = 1;
				this.taskList = [];
				// this.getTaskListByAdminT();
			},
			loadMore() {
				// 	if (this.total > this.taskList.length) {
				// 		this.page = this.page + 1;

				// 	} else {
				// 		this.finished = true;
				// 	}
			},
			goBack() {
				uni.reLaunch({
					url:'/pages/standingBook/index'
				})
			},
			screen() {
				this.showScreen = true;
			},
			onSearch(searchValue) {
				this.searchValue = searchValue
				// this.onRefresh()
				this.showSearch = false
			},
			// 获取id进入详情页
			acquireId(value) {
				uni.navigateTo({
					url: `/pages/standingBook/opticalPathManagement/bussinessDetail/bussinessDetail?title=业务详情`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f2f6fa;;
	}
	.header {
		position: sticky;
		top: 0;
		z-index: 999;
		img {
			width: px2vw(48);
			margin-right: px2vw(40);
		}
	}

	.patrol-search {
		width: px2vw(1020);
		height: 38px;
		margin: px2vw(20) px2vw(30) 0 px2vw(30);
		box-shadow: 0 px2vw(2) px2vw(20) rgba(219, 219, 219, 1);

		.van-search {
			padding: 0 0;
			height: 38px;
			border-radius: px2vw(20) !important;
		}

		.van-search__content {
			background: #fff;
			height: 38px;
			border-radius: px2vw(20) !important;
		}

		/deep/.van-field__control {
			height: 30px;
		}
	}
	.site-other{
		position: absolute;
		top: 12%;
		width: 100vw;
		text-align: center;
		font-size: px2vh(36);
		color: #9B9CAA;
		font-weight: 600;
	}
</style>